<template>
  <div class="home-box">
    <div class="banner ">
      <div class="width1200">
        <p class="slogo">{{ $t("Home.TopBannerInfo") }}</p>
        <div class="download gap20">
          <div class="qrcode">
            <img src="../assets/images/home/icon-qrcode.png" />
          </div>
          <div class="flex flex_column gap20">
            <div class="btn">
              <img class="icon" src="../assets/images/home/icon-AppStore.png" />
              <p class="flex flex_column">
                <span>APP STORE</span>
                <span>Download it from</span>
              </p>
            </div>
            <div class="btn">
              <img
                class="icon"
                src="../assets/images/home/icon-googlePlay.png"
              />
              <p class="flex flex_column">
                <span>GOOGLE PLAY</span>
                <span>Download it from</span>
              </p>
            </div>
          </div>
        </div>
        <div class="report">
          <div class="ranking">
            <div>
              <img src="../assets/images/home/icon-report1.png" />
              <p>
                {{ $t("Home.BankVotes") }}<br />
                {{ $t("Home.LikeInformation") }}
              </p>
            </div>
            <div>
              <img src="../assets/images/home/icon-report2.png" />
              <p>
                {{ $t("Home.HighestSatisfaction") }}<br />
                {{ $t("Home.CustomerSatisfaction") }}
              </p>
            </div>
            <div>
              <img src="../assets/images/home/icon-report3.png" />
              <p>
                {{ $t("Home.FirstInTurkiye") }}<br />
                {{ $t("Home.RankInfo") }}
              </p>
            </div>
          </div>
          <div class="line"></div>
          <div class="shares">
            <div>
              <p>{{ $t("Home.FINECO") }}</p>
              <p>1.30% <img :src="rise" /></p>
            </div>
            <div>
              <p>{{ $t("Home.FTSEMIB") }}</p>
              <p>-0.35% <img :src="fall" /></p>
            </div>
            <div>
              <p>{{ $t("Home.AlmanDAX30") }}</p>
              <p>0.14% <img :src="rise" /></p>
            </div>
            <div>
              <p>{{ $t("Home.NasdaqIndex") }}</p>
              <p>1.02% <img :src="rise" /></p>
            </div>
            <div>
              <p>{{ $t("Home.DowJonesIndex") }}</p>
              <p>0.17% <img :src="rise" /></p>
            </div>
            <div>
              <p>{{ $t("Home.FTSE100Index") }}</p>
              <p>-0.45% <img :src="fall" /></p>
            </div>
            <div>
              <p>{{ $t("Home.EuroToDollar") }}</p>
              <p>1.084% <img :src="rise" /></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-box">
      <div class="width1200 flex">
        <div class="pagination">
          <p>{{ $t("Home.GlobalDigitalCurrencySavingsCard") }}</p>
          <div class="swiper-prev" @click="swiperPrev('mySwiper')">
            <img src="../assets/images/home/icon-prev.png" />
          </div>
          <div class="swiper-next" @click="swiperNext('mySwiper')">
            <img src="../assets/images/home/icon-next.png" />
          </div>
        </div>
        <div class="Swiper">
          <swiper
            ref="mySwiper"
            :options="swiperOption2"
            v-if="bannerList.length > 1"
          >
            <swiper-slide
              class="classify_item"
              v-for="(item, index) in bannerList"
              :key="index"
            >
              <div class="img">
                <img :src="item.src" width="100%" />
              </div>
              <div class="des">
                <p class="p">{{ item.p }}</p>
                <p class="text">{{ item.text }}</p>
                <img :src="right" class="icon-right" alt="" />
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="product">
      <div class="width1200">
        <p class="product_title">{{ $t("Home.CoreProductExplanation") }}</p>
        <div class="product_list">
          <div class="item">
            <div class="flex">
              <div>
                <p class="font16">{{ $t("Home.ForeignCurrencyExchange") }}</p>
                <p class="bold">{{ $t("Home.MultiCurrencyService") }}</p>
              </div>
              <div class="num">
                <img src="../assets/images/home/icon-product1.png" alt="" />
              </div>
            </div>
            <p class="font14">{{ $t("Home.MultiCurrencyServiceInfo") }}</p>
          </div>
          <div class="item">
            <div class="flex">
              <div>
                <p class="font16">{{ $t("Home.ConvenientAcceptance") }}</p>
                <p class="bold">{{ $t("Home.ConversionCurrency") }}</p>
              </div>
              <div class="num">
                <img src="../assets/images/home/icon-product2.png" alt="" />
              </div>
            </div>
            <p class="font14">{{ $t("Home.ConvenientAcceptanceInfo") }}</p>
          </div>
          <div class="item">
            <div class="flex">
              <div>
                <p class="font16">{{ $t("Home.QuickProcessing") }}</p>
                <p class="bold">{{ $t("Home.KYCQuickAuthentication") }}</p>
              </div>
              <div class="num">
                <img src="../assets/images/home/icon-product3.png" alt="" />
              </div>
            </div>
            <p class="font14">{{ $t("Home.QuickProcessingInfo") }}</p>
          </div>
        </div>
        <div class="ecology">
          <p class="bold font22">{{ $t("Home.EcologicalComposition") }}</p>
          <p class="font14">{{ $t("Home.EcologicalCompositionInfo") }}</p>
          <div class="ecology_list">
            <div class="ecology_item">
              <img src="../assets/images/home/icon-ecology1.png" alt="" />
              <p class="bold font18">{{ $t("Home.DigitalWalletPlatform") }}</p>
              <p class="font14">{{ $t("Home.DigitalWalletPlatformInfo") }}</p>
            </div>
            <div class="ecology_item">
              <img src="../assets/images/home/icon-ecology2.png" alt="" />
              <p class="bold font18">
                {{ $t("Home.GlobalDigitalCurrencySavingsCard") }}
              </p>
              <p class="font14">
                {{ $t("Home.GlobalDigitalCurrencySavingsCardInfo") }}
              </p>
            </div>
            <div class="ecology_item">
              <img src="../assets/images/home/icon-ecology3.png" alt="" />
              <p class="bold font18">{{ this.$t("Home.GlobalPayment") }}</p>
              <p class="font14">{{ $t("Home.GlobalPaymentInfo") }}</p>
            </div>
          </div>
        </div>
        <p class="product_title">
          {{ $t("Home.FINECODigitalEcologicalProfit") }}
        </p>
        <div class="profit">
          <p>
            <span class="font28">1</span
            >{{ $t("Home.FlexibleAccessToDailyInterestCalculation") }}
          </p>
          <p>
            <span class="font28">3</span
            >{{ $t("Home.InternationalBankingRegulatory") }}
          </p>
          <p>
            <span class="font28">2</span
            >{{
              $t(
                "Home.RealizeValueGrowthOfCompoundInterestDigitalAssetsWithReturns"
              )
            }}
          </p>
          <p>
            <span class="font28">4</span>{{ $t("Home.RealTimeAcceptance") }}
          </p>
        </div>
        <div class="cube-box">
          <div class="cube" v-for="(i, index) in cubeList">
            <i
              :class="cubeBGList[index].bg"
              :style="{ '--width': cubeBGList[index].width }"
            ></i>
            <div class="info">
              <p v-for="c in i">
                <span class="font16">{{ c.num }}</span>
                <span class="font14">{{ c.lable }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="download">
      <div class="width1200">
        <p class="_title">{{ $t('Home.ApplicationDownload') }}</p>
        <div class="flex marbt50px">
          <div class="left">
            <p class="p"><span class="font28">1</span>{{ $t('Home.GetTheApp') }}</p>
            <p class="text bold marbt10px martp2px">{{ $t("Home.DownloadUsingQRCode") }}</p>
            <p class="text">
             {{ $t('Home.ScanTheQR') }}
            </p>

            <div class="download-box gap20">
              <div class="qrcode">
                <img src="../assets/images/home/icon-qrcode.png" />
              </div>
              <div class="flex flex_column gap20">
                <div class="btn">
                  <img
                    class="icon"
                    src="../assets/images/home/icon-AppStore-white.png"
                  />
                  <p class="flex flex_column">
                    <span>APP STORE</span>
                    <span>Download it from</span>
                  </p>
                </div>
                <div class="btn">
                  <img
                    class="icon"
                    src="../assets/images/home/icon-googlePlay.png"
                  />
                  <p class="flex flex_column">
                    <span>GOOGLE PLAY</span>
                    <span>Download it from</span>
                  </p>
                </div>
              </div>
            </div>

            <p class="p"><span class="font28">2</span>{{ $t('Home.AfterDownloadingTheApp') }}</p>
            <p class="text bold marbt10px martp2px">{{ $t('Home.WatchTheVideo') }}</p>
            <p class="text">
              {{ $t('Home.ClickTheMenu') }}
            </p>
          </div>

          <div class="right">
            <video controls width="100%" height="100%">
              <source
                src="https://www.runoob.com/try/demo_source/mov_bbb.webm"
                type="video/webm"
              />
              <source
                src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"
                type="video/mp4"
              />
              Sorry, your browser doesn't support embedded videos.
            </video>
          </div>
        </div>
      </div>
    </div>
    <div class="activity">
      <div class="width1200">
        <p class="_title">{{ $t('Home.Activities') }}</p>
        <div class="flex gap20">
          <div
            class="classify_item"
            v-for="(item, index) in activityList"
            :key="index"
          >
            <div class="img">
              <img :src="item.src" width="100%" />
            </div>
            <div class="des">
              <p class="text">{{ item.text }}</p>
              <img :src="right" class="icon-right" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bank">
      <div class="width1200">
        <p class="_title">{{ $t("Header.Menu.BorderlessBanking") }}</p>
        <p class="_text">{{ $t('Home.WithFINECOServices') }}</p>
        <div class="pagination">
          <div class="swiper-prev" @click="swiperPrev('bankSwiper')">
            <img src="../assets/images/home/icon-prev.png" />
          </div>
          <div class="swiper-next" @click="swiperNext('bankSwiper')">
            <img src="../assets/images/home/icon-next.png" />
          </div>
        </div>
        <div class="Swiper">
          <swiper
            ref="bankSwiper"
            :options="swiperOption3"
            v-if="bankList.length > 1"
          >
            <swiper-slide
              class="classify_item"
              v-for="(item, index) in bankList"
              :key="index"
            >
              <div class="img">
                <img :src="item.src" width="100%" />
              </div>
              <div class="des">
                <p class="p">{{ item.p }}</p>
                <p class="text">{{ item.text }}</p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="evaluate">
      <div class="width1200">
        <p class="_title">{{ $t('Home.UserReviews') }}</p>
        <p class="_text">{{ $t('Home.WeServeEvery') }}</p>
        <div class="box">
          <div class="text-center">
            <span class="star"></span>
            <span class="star"></span>
            <span class="star"></span>
            <span class="star"></span>
            <span class="star"></span>
          </div>
          <p class="font22">{{ $t('Home.Excellent') }}</p>
          <p class="flex flex_center">
            <span class="font16 flex-in"
              ><img class="green_star" :src="green_star" />{{ $t('Home.TrustNavigator') }}</span
            >
            <span class="font16">{{ $t('Home.BasedOn') }}</span>
          </p>
        </div>
        <div class="pagination">
          <div class="swiper-prev" @click="swiperPrev('evaluateSwiper')">
            <img src="../assets/images/home/icon-prev.png" />
          </div>
          <div class="swiper-next" @click="swiperNext('evaluateSwiper')">
            <img src="../assets/images/home/icon-next.png" />
          </div>
        </div>
        <div class="Swiper">
          <swiper
            ref="evaluateSwiper"
            :options="swiperOption3"
            v-if="evaluateList.length > 1"
          >
            <swiper-slide
              class="classify_item"
              v-for="(item, index) in evaluateList"
              :key="index"
            >
              <div class="w20">
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
                <span class="star"></span>
              </div>
              <div class="des">
                <p class="p">{{ item.p }}</p>
                <p class="text">{{ item.text }}</p>
                <p class="text martp10px">
                  <span class="marrt10px">{{ item.name }}</span
                  >{{ item.date }}
                </p>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import rise from "@/assets/images/home/icon-rise.png";
import fall from "@/assets/images/home/icon-fall.png";
import right from "@/assets/images/home/icon-right.png";
import banner1 from "@/assets/images/home/banner1.png";
import banner2 from "@/assets/images/home/banner2.png";
import banner3 from "@/assets/images/home/banner3.png";
import banner4 from "@/assets/images/home/banner4.png";
import banner5 from "@/assets/images/home/banner5.png";
import banner6 from "@/assets/images/home/banner6.png";

import green_star from "@/assets/images/home/green-star.png";
import white_star from "@/assets/images/home/white-star.png";
import bank1 from "@/assets/images/home/icon-bank1.png";
import bank2 from "@/assets/images/home/icon-bank2.png";
import bank3 from "@/assets/images/home/icon-bank3.png";
import bank4 from "@/assets/images/home/icon-bank4.png";
export default {
  name: "home",
  // 此处不能用Swiper作为name，否则报错
  data() {
    return {
      rise: rise,
      fall: fall,
      right: right,
      white_star: white_star,
      green_star: green_star,
      cubeBGList: [
        { bg: "redBg", width: "65%" },
        { bg: "blueBg", width: "70%" },
        { bg: "blueGreenBg", width: "75%" },
        { bg: "chartreuseBg", width: "80%" },
        { bg: "yellowBg", width: "85%" },
        { bg: "violetBg", width: "90%" }
      ],
      cubeList: [
        [
          {
            lable: this.$t("Home.NumberOfDaysForDemandDeposit"),
            num: this.$t('Home.Over361Days')
          },
          { lable: this.$t('Home.DailyDepositInterestRate'), num: "0.70%" },
          { lable: this.$t('Home.SetDepositAmount'), num: "3000" },
          { lable: this.$t('Home.DepositDays'), num: "--" },
          { lable: this.$t('Home.TotalInterest'), num: "--" }
        ],
        [
          {
            lable: this.$t("Home.NumberOfDaysForDemandDeposit"),
            num: this.$t('Home.271-361Days')
          },
          { lable: this.$t('Home.DailyDepositInterestRate'), num: "0.70%" },
          { lable: this.$t('Home.SetDepositAmount'), num: "3000" },
          { lable: this.$t('Home.DepositDays'), num: "360" },
          { lable: this.$t('Home.TotalInterest'), num: "13010.87" }
        ],
        [
          {
            lable: this.$t("Home.NumberOfDaysForDemandDeposit"),
            num: this.$t('Home.121-270Days')
          },
          { lable: this.$t('Home.DailyDepositInterestRate'), num: "0.50%" },
          { lable: this.$t('Home.SetDepositAmount'), num: "3000" },
          { lable: this.$t('Home.DepositDays'), num: "270" },
          { lable: this.$t('Home.TotalInterest'), num: "6351.69" }
        ],
        [
          {
            lable: this.$t("Home.NumberOfDaysForDemandDeposit"),
            num: this.$t('Home.61-120Days')
          },
          { lable: this.$t('Home.DailyDepositInterestRate'), num: "0.40%" },
          { lable: this.$t('Home.SetDepositAmount'), num: "3000" },
          { lable: this.$t('Home.DepositDays'), num: "120" },
          { lable: this.$t('Home.TotalInterest'), num: "1427.11" }
        ],
        [
          {
            lable: this.$t("Home.NumberOfDaysForDemandDeposit"),
            num: this.$t('Home.1-60Days')
          },
          { lable: this.$t('Home.DailyDepositInterestRate'), num: "0.30%" },
          { lable: this.$t('Home.SetDepositAmount'), num: "3000" },
          { lable: this.$t('Home.DepositDays'), num: "60" },
          { lable: this.$t('Home.TotalInterest'), num: "484.64" }
        ],
        [
          {
            lable: this.$t("Home.NumberOfDaysForDemandDeposit"),
            num: this.$t('Home.1-30Days')
          },
          { lable: this.$t('Home.DailyDepositInterestRate'), num: "0.20%" },
          { lable: this.$t('Home.SetDepositAmount'), num: "3000" },
          { lable: this.$t('Home.DepositDays'), num: "30" },
          { lable: this.$t('Home.TotalInterest'), num: "185.33" }
        ]
      ],
      //和上面绑定的一致
      swiperOptions: {
        pagination: ".swiper-pagination",
        // 轮播图的点
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        pagination: ".swiper-pagination",
        //循环
        loop: true,
        //每张播放时长3秒，自动播放
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        //滑动速度
        speed: 100
        // delay:1000
      },
      swiperOption2: {
        slidesPerView: 3,
        spaceBetween: 20,
        // 轮播图的点
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        //循环
        loop: false,
        //每张播放时长3秒，自动播放
        // autoplay: true,
        //滑动速度
        speed: 1000
        // delay:1000
      },
      swiperOption3: {
        slidesPerView: this.isMobileDevice()?3:4,
        spaceBetween: 20,
        // 轮播图的点
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        //循环
        loop: false,
        //每张播放时长3秒，自动播放
        autoplay: false,
        //滑动速度
        speed: 1000
        // delay:1000
      },
      activityList: [
        {
          id: 2,
          src: banner4,
          text: this.$t("Home.ActivitiesInfo1")
        },
        {
          id: 3,
          src: banner5,
          text: this.$t("Home.ActivitiesInfo2")
        },
        {
          id: 4,
          src: banner6,
          text: this.$t("Home.ActivitiesInfo3")
        }
      ],
      bannerList: [
        {
          id: 2,
          src: banner1,
          p: this.$t("Home.WorldwideATMWithdrawals"),
          text: this.$t("Home.WorldwideATMWithdrawalsINfo")
        },
        {
          id: 3,
          src: banner2,
          p: this.$t("Home.ShoppingLife"),
          text: this.$t("Home.ShoppingLifeInfo")
        },
        {
          id: 4,
          src: banner3,
          p: this.$t("Home.GlobalPayment"),
          text: this.$t("Home.GlobalPaymentInfo")
        }
      ],
      bankList: [
        {
          id: 1,
          src: bank1,
          p: this.$t("Home.GlobalPayment"),
          text: this.$t("Home.GlobalPaymentInfo")
        },
        {
          id: 2,
          src: bank2,
          p: this.$t("Home.DigitalWalletPlatform"),
          text: this.$t("Home.DigitalWalletPlatformInfo")
        },
        {
          id: 3,
          src: bank3,
          p: this.$t("Home.GlobalDigitalCurrencySavingsCard"),
          text: this.$t("Home.GlobalDigitalCurrencySavingsCardInfo")
        },
        {
          id: 4,
          src: bank4,
          p: this.$t("Home.CustomerContactCenter"),
          text: this.$t("Home.CustomerContactCenterInfo")
        }
      ],
      evaluateList: [
        {
          id: 1,
          p: this.$t('Home.Comment_1_p'),
          text: this.$t('Home.Comment_1_text'),
          name:this.$t('Home.Reviewer1'),
          date: "6.15"
        },
        {
          id: 2,
          p: this.$t('Home.Comment_2_p'),
          text: this.$t('Home.Comment_2_text'),
          name: this.$t('Home.Reviewer2'),
          date: "6.15"
        },
        {
          id: 3,
          p: this.$t('Home.Comment_3_p'),
          text: this.$t('Home.Comment_3_text'),
          name: this.$t('Home.Reviewer3'),
          date: "6.15"
        },
        {
          id: 4,
          p: this.$t('Home.Comment_4_p'),
          text: this.$t('Home.Comment_4_text'),
          name: this.$t('Home.Reviewer4'),
          date: "6.15"
        }
      ]
    };
  },
  methods: {
    isMobileDevice() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    },
    gotos(index) {
      console.log(this.$refs.mySwiper);
      this.$refs.mySwiper.swiper.slideNext();
      this.$refs.mySwiper.swiper.slideTo(index);
    },
    swiperPrev(mySwiper) {
      this.$refs[mySwiper].swiper.slidePrev();
    },
    swiperNext(mySwiper) {
      this.$refs[mySwiper].swiper.slideNext();
    }
  }
};
</script>

<style lang="less" scoped>
.home-box {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .banner {
    height: 600px;
    width: 100%;
    background: #010000;
    background-image: url("../assets/images/home/home-banner.png");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    .slogo {
      width: 600px;
      height: 128px;
      opacity: 1;
      font-family: HarmonyOS Sans SC;
      font-size: 55px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0em;
      color: #ffffff;
      margin-top: 133px;
    }
    .download {
      display: flex;
      margin-top: 40px;
      .qrcode {
        width: 142px;
        height: 142px;
        opacity: 1;
        background: #ffffff;
        box-sizing: border-box;
        border: 1px solid #c5c5c5;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .btn {
        width: 213px;
        height: 60px;
        border-radius: 6px;
        opacity: 1;
        background: #ffffff;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        color: #000000;
        font-family: HarmonyOS Sans SC;
        font-size: 14px;
        cursor: pointer;
        &:nth-child(2) {
          background: #16559e;
          color: #ffffff;
        }
        .icon {
          width: 40px;
          height: 40px;
        }
        span:nth-child(1) {
          font-weight: 700;
        }
      }
    }
    .report {
      position: relative;
      margin-top: 73px;
      border-radius: 8px;
      opacity: 1;
      background: #ffffff;
      padding: 30px 20px;
      box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
      z-index: 99;
      .ranking {
        display: flex;
        & > div {
          display: flex;
          align-items: center;
          width: calc(100% / 3);
          padding: 18px 35px;
          gap: 20px;
          &:not(:last-child) {
            border-right: 1px solid #d1d4dc;
          }
          img {
            width: 60px;
            height: 60px;
          }
          p {
            font-family: HarmonyOS Sans SC;
            font-size: 14px;
            color: #353535;
          }
        }
      }
      .line {
        border-bottom: 1px solid #d1d4dc;
        margin: 30px 0;
      }
      .shares {
        display: flex;
        gap: 20px;
        & > div {
          display: flex;
          flex-direction: column;
          flex: 1;
          height: 42px;
          gap: 5px;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          &:not(:last-child) {
            border-right: 1px solid #d1d4dc;
          }
          img {
            width: 14px;
            height: 14px;
            margin-left: 5px;
          }
          p:nth-child(1) {
            font-weight: bold;
          }
          p:nth-child(2) {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .product {
    background: linear-gradient(
      180deg,
      rgba(246, 246, 246, 0) 3%,
      #f6f6f6 100%
    );
    padding-bottom: 70px;
    .product_title {
      font-family: HarmonyOS Sans SC;
      font-size: 40px;
      color: #181818;
      text-align: center;
      margin: 70px 0;
    }
    .product_list {
      display: flex;
      gap: 20px;
      & > .item {
        flex: 1;
        background: #f6f6f6;
        font-size: 16px;
        color: #5a5a5a;
        padding: 35px;
        & > .flex {
          position: relative;
        }
        .bold {
          font-size: 18px;
          font-weight: bold;
          color: #181818;
          margin: 20px 0 12px;
        }
        .num {
          width: auto;
          position: absolute;
          top: -40px;
          right: -5px;
          padding: 20px 5px;
          img {
            max-width: 100%;
            height: 70px;
            object-fit: contain;
          }
        }
        .font14 {
          line-height: 1.5;
        }
      }
    }
    .ecology {
      background: #f6f6f6;
      padding: 30px;
      margin-top: 20px;
      color: #5a5a5a;
      .bold {
        color: #181818;
        line-height: 1.8;
        margin-bottom: 10px;
      }
      .ecology_list {
        display: flex;
        gap: 70px;
      }
      .ecology_item {
        flex: 1;
        img {
          width: 80px;
          height: 80px;
          margin: 30px 0 20px 0;
        }
      }
    }
    .profit {
      color: #181818;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 80px;
      p {
        box-sizing: border-box;
        padding: 5px 20px;
        width: 49%;
        display: inline-flex;
        align-items: center;
        font-weight: bold;
        .font28 {
          font-style: italic;
          font-family: DingTalk JinBuTi;
          margin-right: 8px;
        }
        &:nth-child(3) {
          justify-content: flex-end;
        }
        &:nth-child(4) {
          justify-content: flex-end;
        }
      }
    }
    .cube-box {
      position: relative;
      z-index: 2;
      width: 100%;
      .cube {
        position: relative;
        width: 100%;
        // height: 69px;
        height: 90px;
        background: #d3d3d3;
        transition: 1.5s;
        perspective: 200px;
        margin-top: 15px;
        &::after {
          content: "";
          position: absolute;
          top: -28px;
          left: 0;
          width: 100%;
          height: 28px;
          background: #e7e6e6;
          transform-origin: bottom;
          transform: rotateX(45deg);
          transition: 1.5s;
        }
        i {
          position: absolute;
          display: inline-block;
          height: 100%;
          background: #d3d3d3;
          z-index: 2;
          transition: 1.5s;
          perspective: 200px;
          width: var(--width);
          &::after {
            content: "";
            position: absolute;
            top: -28px;
            left: 0;
            width: 100%;
            height: 28px;
            background: #e7e6e6;
            transform-origin: bottom;
            transform: rotateX(45deg);
            transition: 1.5s;
          }
        }
        .redBg {
          background: #f93e5a;
          &::after {
            background: #fc6d6f;
          }
        }
        .blueBg {
          background: #16559e;
          &::after {
            background: #2b75cb;
          }
        }
        .blueGreenBg {
          background: #25ad97;
          &::after {
            background: #38c8b1;
          }
        }
        .chartreuseBg {
          background: #9fb757;
          &::after {
            background: #bcd473;
          }
        }
        .yellowBg {
          background: #ee9925;
          &::after {
            background: #f6ac47;
          }
        }
        .violetBg {
          background: #5840e1;
          &::after {
            background: #846efd;
          }
        }
        .info {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          z-index: 9;
          padding: 0 20px;
          & > p {
            display: inline-flex;
            flex-direction: column;
            font-family: HarmonyOS Sans SC;
            color: #ffffff;
            width: 16%;
            padding: 0 20px;
          }
        }
      }
    }
  }
  .download {
    ._title {
      font-family: HarmonyOS Sans SC;
      font-size: 40px;
      color: #181818;
      text-align: center;
      margin: 70px 0;
    }
    .left {
      .download-box {
        display: flex;
        margin-top: 30px;
        margin-bottom: 30px;
        .qrcode {
          width: 142px;
          height: 142px;
          opacity: 1;
          background: #ffffff;
          box-sizing: border-box;
          border: 1px solid #c5c5c5;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .btn {
          width: 213px;
          height: 60px;
          border-radius: 6px;
          opacity: 1;
          background: #000000;
          display: flex;
          align-items: center;
          gap: 10px;
          justify-content: center;
          color: #ffffff;
          font-family: HarmonyOS Sans SC;
          font-size: 14px;
          cursor: pointer;
          &:nth-child(2) {
            background: #16559e;
          }
          .icon {
            width: 40px;
            height: 40px;
          }
          span:nth-child(1) {
            font-weight: 700;
          }
        }
      }
      .p {
        display: flex;
        align-items: center;
        color: #181818;
        font-family: HarmonyOS Sans SC;
        font-size: 18px;
        font-weight: bold;
        .font28 {
          font-style: italic;
          font-family: DingTalk JinBuTi;
          margin-right: 8px;
        }
      }
      .text {
        color: #5a5a5a;
        font-size: 14px;
        font-family: HarmonyOS Sans SC;
      }
    }
    .right {
      width: 634.29px;
      height: 407.79px;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  .banner-box {
    padding-top: 360px;
    padding-bottom: 70px;
    background: #f6f6f6;
    .pagination {
      padding-top: 10px;
      padding-right: 80px;
      position: relative;
      width: 360px;
      p {
        font-family: HarmonyOS Sans SC;
        font-size: 40px;
        color: #111111;
      }
      .swiper-prev {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0px;
        bottom: 0;
        img {
          max-width: 100%;
          object-fit: contain;
        }
        cursor: pointer;
      }
      .swiper-next {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 60px;
        bottom: 0;
        img {
          max-width: 100%;
          object-fit: contain;
        }
        cursor: pointer;
      }
    }
    .Swiper {
      width: calc(100% - 360px);
      .classify_item{
        background: #ffffff;
        height: auto;
        position: relative;
        padding-bottom: 40px;
      }
      .des {
        padding: 20px;
        background: #ffffff;
      }
      .img {
        height: 168px;
        img {
          max-width: 100%;
          height: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
      }
      .p {
        font-family: HarmonyOS Sans SC;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        margin: -10px 0 10px;
      }
      .text {
        font-family: HarmonyOS Sans SC;
        color: #5a5a5a;
        font-size: 14px;
      }
      .icon-right {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 20px;
        bottom: 20px;
      }
    }
  }
  .activity {
    padding-bottom: 70px;
    background: #f6f6f6;
    ._title {
      font-family: HarmonyOS Sans SC;
      font-size: 40px;
      color: #181818;
      text-align: center;
      margin: 70px 0;
    }
    .classify_item {
      .des {
        padding: 20px;
        background: #ffffff;
      }
      .img {
        height: 197px;
        img {
          max-width: 100%;
          height: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
      }

      .text {
        font-family: HarmonyOS Sans SC;
        color: #292929;
        font-size: 14px;
      }
      .icon-right {
        width: 30px;
        height: 30px;
        margin-top: 20px;
      }
    }
  }
  .bank {
    padding-bottom: 70px;
    ._title {
      font-family: HarmonyOS Sans SC;
      font-size: 40px;
      color: #181818;
      text-align: center;
      margin: 70px 0 20px;
    }
    ._text {
      font-family: HarmonyOS Sans SC;
      font-size: 14px;
      text-align: center;
      color: #5a5a5a;
      margin-bottom: 70px;
    }
    .width1200{
      position: relative;
    }
    .pagination {
      .swiper-prev {
        width: 40px;
        height: 40px;
        position: absolute;
        left: -60px;
        top: 67%;
        img {
          max-width: 100%;
          object-fit: contain;
        }
        cursor: pointer;
      }
      .swiper-next {
        width: 40px;
        height: 40px;
        position: absolute;
        right: -60px;
        top: 67%;
        img {
          max-width: 100%;
          object-fit: contain;
        }
        cursor: pointer;
      }
    }
    .Swiper {
      .classify_item {
        background: #f6f6f6;
        padding: 30px 20px;
        border-radius: 8px;
        height: auto;
      }
      .img {
        width: 70px;
        height: 70px;
        img {
          max-width: 100%;
          height: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
      }
      .p {
        font-family: HarmonyOS Sans SC;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        margin: 20px 0 10px;
      }
      .text {
        font-family: HarmonyOS Sans SC;
        color: #5a5a5a;
        font-size: 14px;
      }
    }
  }
  .evaluate {
    padding-bottom: 70px;
    background: #f6f6f6;
    ._title {
      font-family: HarmonyOS Sans SC;
      font-size: 40px;
      color: #181818;
      text-align: center;
      margin: 70px 0 20px;
    }
    ._text {
      font-family: HarmonyOS Sans SC;
      font-size: 14px;
      text-align: center;
      color: #5a5a5a;
      margin-bottom: 70px;
    }
    .width1200{
      position: relative;
    }
    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      align-items: center;
      height: 172px;
      border-radius: 8px;
      opacity: 1;
      background: #16559e;
      margin-bottom: 50px;
      p {
        text-align: center;
        color: #ffffff;
        font-family: HarmonyOS Sans SC;
      }
      .flex-in {
        display: inline-flex;
        align-items: center;
        margin-right: 35px;
      }
    }
    .green_star {
      width: 24px;
      height: 24px;
    }
    .star {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #17b67b;
      background: url("../assets/images/home/icon-green-star.png") no-repeat center;
      background-size: 100%;
    }
    .dstar {
      display: inline-block;
      width: 30px;
      height: 30px;
      background: #bebebe;
      background: url("../assets/images/home/icon-white-star.png") no-repeat center;
      background-size: 100%;
    }
    .w20 {
      .dstar,
      .star {
        width: 20px;
        height: 20px;
      }
    }
    .pagination {
      .swiper-prev {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0px;
        top: 70%;
        img {
          max-width: 100%;
          object-fit: contain;
        }
        cursor: pointer;
      }
      .swiper-next {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0px;
        top: 70%;
        img {
          max-width: 100%;
          object-fit: contain;
        }
        cursor: pointer;
      }
    }
    .Swiper {
      width: calc(100% - 140px);
      margin-left: 70px;
      .classify_item {
        background: #f6f6f6;
        padding: 30px 20px;
        border-radius: 8px;
      }
      .img {
        width: 70px;
        height: 70px;
        img {
          max-width: 100%;
          height: 100%;
          border-top-left-radius: 6px;
          border-top-right-radius: 6px;
        }
      }
      .p {
        font-family: HarmonyOS Sans SC;
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        margin: 10px 0 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .text {
        font-family: HarmonyOS Sans SC;
        color: #5a5a5a;
        font-size: 14px;
      }
    }
  }
  .title-text-box {
    // height: 1000px;
    background-color: black;
    // border-bottom: 1px black solid;
  }

  .needXR-box {
    height: 355px;

    .needXR-content {
      height: 100%;
      // border: 1px red solid;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .needXR-content-text {
        background: white;
        position: absolute;
        bottom: -100px;
        // left: 72px;
        width: 592px;
        height: 374px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;

        .text_needXR-box {
          width: 512px;
        }
      }
    }
  }

  .imgList-box {
    background-color: black;
    width: 100%;
    // border:1px red solid;
    //   height: 500px;
  }

  .core-technology-box {
    background-color: black;
    // border:1px black solid;
  }

  .product-system-box {
    // border:1px black solid;
    background-color: black;
  }

  .solution-box {
    background-color: black;
  }
}
.PHONE {
  .home-box {
    .banner {
      height: 500px;
      background-size: cover;
      background-position: center;
      .slogo {
        margin-top: 60px;
        margin-left: 30px;
        font-size: 36px;
        width: 400px;
        height: 84px;
      }
      .download {
        margin-left: 30px;
        margin-top: 58px;
        &.gap20 {
          gap: 30px;
        }
      }
      .report {
        .ranking {
          & > div {
            padding-top: 0px;
            flex-direction: column;
            p {
              text-align: center;
            }
          }
        }
      }
      .shares {
        display: block;
        white-space: nowrap;
        overflow-x: auto;
        & > div {
          display: inline-block;
          &:not(:last-child) {
            border-right: 1px solid transparent;
            margin-right: 50px;
          }
        }
      }
    }
    .banner-box {
      padding-bottom: 138px;
      .flex {
        flex-direction: column;
        position: relative;
        .pagination {
          padding-right: 0;
          padding-bottom: 60px;
          position: static;
          width: 100%;
          p {
            text-align: center;
          }
          .swiper-prev {
            left: 40%;
            top: calc(100% + 45px);
          }
          .swiper-next {
            left: 50%;
            top: calc(100% + 45px);
          }
        }
        .Swiper {
          width: 100%;
        }
      }
    }
    .product {
      .product_title {
        margin: 60px 0;
      }
      .product_list {
        flex-direction: column;
      }
      .profit {
        p {
          &:nth-child(1) {
            width: 35%;
          }
          &:nth-child(2) {
            width: 63%;
          }
          &:nth-child(3) {
            width: 53%;
          }
          &:nth-child(4) {
            width: 45%;
          }
        }
      }
      .ecology {
        .ecology_list {
          flex-direction: column;
          gap: 10px;
        }
      }
      .cube-box {
        .cube {
          i {
            width: calc(var(--width) + 10%);
          }
          .info {
            box-sizing: border-box;
            & > p {
              width: 20%;
              padding: 0 5px;
              box-sizing: border-box;
              .font14 {
                font-size: 12px;
              }
              &:nth-child(1){
                width: 25%;
              }
              &:nth-child(5){
                width: 15%;
              }
            }
          }
        }
      }
    }
    .download {
      padding: 0 30px;
      ._title {
        margin: 60px 0 40px;
      }
      .flex.marbt50px {
        flex-direction: column-reverse;
        .left {
          margin-top: 40px;
        }
        .right {
          width: 100%;
        }
      }
    }
    .activity {
      ._title {
        margin: 60px 0;
      }
      .flex {
        white-space: nowrap;
        overflow-y: auto;
      }
      .classify_item {
        width: 386px;
        .des {
          white-space: break-spaces;
        }
        .img {
          width: 386px;
        }
      }
    }
    .bank {
      padding-bottom: 150px;
      ._title {
        margin-top: 60px;
      }
      ._text {
        margin-bottom: 60px;
      }
      .width1200 {
        position: relative;
      }
      .pagination {
        position: static;
        .swiper-prev {
          left: 43%;
          top: calc(100% + 45px);
        }
        .swiper-next {
          right: 43%;
          top: calc(100% + 45px);
        }
      }
    }
    .evaluate {
      ._title {
        margin-top: 60px;
      }
      ._text {
        margin-bottom: 60px;
      }
      .pagination {
        .swiper-prev {
          left: 40px;
        }
        .swiper-next {
          right: 40px;
        }
      }
    }
  }
}
</style>
